<template>
  <div class="hospital-display">
    <!-- 动态背景粒子 -->
    <div class="particles">
      <div v-for="(particle, index) in particles" :key="index" class="particle" :style="{
        width: particle.size + 'px',
        height: particle.size + 'px',
        left: particle.x + 'px',
        top: particle.y + 'px',
        animationDuration: particle.duration + 's',
        animationDelay: particle.delay + 's'
      }"></div>
    </div>

    <!-- 顶部标题栏 -->
    <header class="header">
      <div class="hospital-logo">
        <div class="logo-icon">🏥</div>
        <h1 class="hospital-name">济南市XX医院</h1>
      </div>
      <div class="datetime">
        <div class="date">{{ currentDate }}</div>
        <div class="time">{{ currentTime }}</div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 左侧就诊信息 -->
      <section class="panel visits-panel">
        <div class="panel-header">
          <h2>今日就诊</h2>
          <div class="stats">
            <div class="stat">
              <div class="stat-value">{{ todayVisits }}</div>
              <div class="stat-label">总人数</div>
            </div>
            <div class="stat">
              <div class="stat-value">{{ waitingVisits }}</div>
              <div class="stat-label">等待中</div>
            </div>
          </div>
        </div>
        <div class="visits-list">
          <div v-for="visit in visits" :key="visit.id" class="visit-card" :class="'status-' + visit.status">
            <div class="visit-info">
              <div class="patient-name">{{ visit.name }}</div>
              <div class="department">{{ visit.department }}</div>
            </div>
            <div class="visit-status">
              <div class="status">{{ getStatusText(visit.status) }}</div>
              <div class="time">{{ visit.time }}</div>
            </div>
          </div>
        </div>
      </section>

      <!-- 中间数据可视化 -->
      <section class="panel data-panel">
        <div class="panel-header">
          <h2>就诊数据</h2>
          <div class="time-range">最近7天</div>
        </div>
        <div class="chart-container">
          <div class="chart">
            <div v-for="(item, index) in chartData" :key="index" class="chart-bar"
              :style="{ height: item.value / maxChartValue * 100 + '%' }">
              <div class="bar-value">{{ item.value }}</div>
              <div class="bar-label">{{ item.label }}</div>
            </div>
          </div>
        </div>
        <div class="emergency-notice" v-if="emergencyNotice.show">
          <div class="warning-icon">⚠️</div>
          <div class="notice-text">{{ emergencyNotice.message }}</div>
        </div>
      </section>

      <!-- 右侧医生信息 -->
      <section class="panel doctors-panel">
        <div class="panel-header">
          <h2>在岗医生</h2>
          <div class="stats">
            <div class="stat">
              <div class="stat-value">{{ availableDoctors }}</div>
              <div class="stat-label">可接诊</div>
            </div>
          </div>
        </div>
        <div class="doctors-grid">
          <div v-for="doctor in doctors" :key="doctor.id" class="doctor-card" :class="{ 'available': doctor.available }">
            <div class="doctor-avatar">
              <img :src="doctor.avatar" :alt="doctor.name">
            </div>
            <div class="doctor-info">
              <div class="doctor-name">{{ doctor.name }}</div>
              <div class="doctor-specialty">{{ doctor.specialty }}</div>
              <div class="doctor-status">
                {{ doctor.available ? '可接诊' : '忙碌中' }}
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'

// 动态背景粒子
const particles = ref([])
const generateParticles = () => {
  const count = 30
  particles.value = Array.from({ length: count }, () => ({
    x: Math.random() * window.innerWidth,
    y: Math.random() * window.innerHeight + window.innerHeight,
    size: Math.random() * 5 + 1,
    duration: Math.random() * 10 + 10,
    delay: Math.random() * 5
  }))
}

// 日期时间
const currentDate = ref('')
const currentTime = ref('')
const updateDateTime = () => {
  const now = new Date()
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    weekday: 'long'
  })
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  })
}

// 就诊数据
const todayVisits = ref(0)
const waitingVisits = ref(0)
const visits = ref([])
const availableDoctors = ref(0)

const departments = ['内科', '外科', '儿科', '妇产科', '眼科', '耳鼻喉科']
const names = ['张', '王', '李', '赵', '刘', '陈', '杨', '黄', '周', '吴']

const generateVisits = () => {
  todayVisits.value = Math.floor(Math.random() * 200) + 100
  waitingVisits.value = Math.floor(Math.random() * 30) + 10

  // 更新就诊列表
  if (visits.value.length < 8 || Math.random() > 0.7) {
    for (let i = 0; i < 6; i++) {
      visits.value.unshift({
        id: Date.now(),
        name: names[Math.floor(Math.random() * names.length)] + (Math.random() > 0.5 ? '先生' : '女士'),
        department: departments[Math.floor(Math.random() * departments.length)],
        status: ['waiting', 'in-progress', 'completed'][Math.floor(Math.random() * 3)],
        time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', hour12: false })
      })
    }

    if (visits.value.length > 10) {
      visits.value.pop()
    }
  }
}

const getStatusText = (status) => {
  const statusMap = {
    'waiting': '等待中',
    'in-progress': '就诊中',
    'completed': '已完成'
  }
  return statusMap[status] || status
}

// 图表数据
const chartData = ref([
  { label: '周一', value: 120 },
  { label: '周二', value: 150 },
  { label: '周三', value: 180 },
  { label: '周四', value: 200 },
  { label: '周五', value: 250 },
  { label: '周六', value: 180 },
  { label: '周日', value: 100 }
])

const maxChartValue = computed(() => {
  return Math.max(...chartData.value.map(item => item.value))
})

const updateChartData = () => {
  chartData.value.forEach(item => {
    item.value = Math.max(50, item.value + Math.floor(Math.random() * 40) - 20)
  })
}

// 医生数据
const doctors = ref([
  { id: 1, name: '张医生', specialty: '心血管内科', available: true, avatar: 'https://p3-search.byteimg.com/img/labis/b2484bea53aa2628085a3eb514f0b78d~480x480.PNG' },
  { id: 2, name: '李医生', specialty: '神经外科', available: false, avatar: 'https://p2.ssl.qhimgs1.com/t01123ea2b52d24ffcc.png' },
  { id: 3, name: '王医生', specialty: '儿科', available: true, avatar: 'https://p2.ssl.qhimgs1.com/t0343a3e7eeb1b75298.jpg' },
  { id: 4, name: '赵医生', specialty: '骨科', available: true, avatar: 'https://p2.ssl.qhimgs1.com/t03d5953e6252975aa8.jpg' },
  { id: 5, name: '刘医生', specialty: '眼科', available: false, avatar: 'https://p1.ssl.qhimgs1.com/sdr/400__/t0162deb65f0b013dc1.png' },
  { id: 6, name: '陈医生', specialty: '耳鼻喉科', available: true, avatar: 'https://p0.ssl.qhimgs1.com/sdr/400__/t0167855ed8bda56c5a.jpg' }
])

const updateDoctorsStatus = () => {
  availableDoctors.value = doctors.value.filter(d => d.available).length
  doctors.value.forEach(doctor => {
    if (Math.random() > 0.8) {
      doctor.available = !doctor.available
    }
  })
}

// 紧急通知
const emergencyNotice = ref({
  show: true,
  message: '紧急通知：今日下午3点至5点医院将进行消防演练，请配合工作人员指引。'
})

// 定时更新数据
let interval
onMounted(() => {
  generateParticles()
  updateDateTime()
  generateVisits()
  updateDoctorsStatus()

  interval = setInterval(() => {
    updateDateTime()
    // generateVisits()
    // updateChartData()
    // updateDoctorsStatus()
  }, 1000)
})

onBeforeUnmount(() => {
  clearInterval(interval)
})
</script>

<style scoped>
.hospital-display {
  /* width: 100vw; */
  /* height: 100vh; */
  padding: 20px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 20px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0a1128 0%, #1a2a4a 100%);
}

.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  background: rgba(100, 200, 255, 0.3);
  border-radius: 50%;
  animation: float 15s infinite linear;
  filter: blur(1px);
}

@keyframes float {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }

  10% {
    opacity: 0.5;
  }

  90% {
    opacity: 0.5;
  }

  100% {
    transform: translateY(-100px) translateX(100px);
    opacity: 0;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: rgba(16, 42, 66, 0.5);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  z-index: 1;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(58, 123, 213, 0.2);
}

.hospital-logo {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo-icon {
  font-size: 2.5rem;
}

.hospital-name {
  font-size: 1.8rem;
  font-weight: bold;
  background: linear-gradient(90deg, #00d2ff, #3a7bd5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.datetime {
  text-align: right;
}

.date {
  font-size: 1.2rem;
  font-weight: 500;
  color: #00d2ff;
}

.time {
  font-size: 1.5rem;
  font-weight: bold;
  color: #00d2ff;
}

.main-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 20px;
  z-index: 1;
}

.panel {
  height: 70%;
  background: rgba(16, 42, 66, 0.5);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(58, 123, 213, 0.2);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.panel:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-header h2 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #00d2ff;
}

.stats {
  display: flex;
  gap: 20px;
}

.stat {
  text-align: center;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
}

.stat-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.visits-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.visit-card {
  background: rgba(26, 58, 90, 0.5);
  border-radius: 12px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.visit-card:hover {
  transform: translateX(5px);
  background: rgba(26, 58, 90, 0.8);
}

.visit-info {
  flex: 1;
}

.patient-name {
  font-weight: 600;
  margin-bottom: 5px;
}

.department {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.visit-status {
  text-align: right;
}

.status {
  font-weight: 600;
  margin-bottom: 5px;
}

.time {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

.status-waiting .status {
  color: #ffc107;
}

.status-in-progress .status {
  color: #00bcd4;
}

.status-completed .status {
  color: #4caf50;
}

.chart-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chart {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 10px;
  padding: 20px 0;
}

.chart-bar {
  width: 40px;
  background: linear-gradient(to top, #00d2ff, #3a7bd5);
  border-radius: 6px 6px 0 0;
  position: relative;
  transition: height 0.5s ease;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.3);
}

.bar-value {
  position: absolute;
  top: -25px;
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
}

.bar-label {
  position: absolute;
  bottom: -25px;
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
}

.emergency-notice {
  margin-top: 20px;
  padding: 15px;
  background: rgba(214, 48, 49, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 15px;
  animation: pulse 2s infinite;
}

.warning-icon {
  font-size: 1.8rem;
  color: #ff4b2b;
}

.notice-text {
  font-weight: 500;
  color: #ff4b2b;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(214, 48, 49, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(214, 48, 49, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(214, 48, 49, 0);
  }
}

.doctors-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  overflow-y: auto;
}

.doctor-card {
  background: rgba(26, 58, 90, 0.5);
  border-radius: 12px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}

.doctor-card:hover {
  transform: scale(1.05);
}

.doctor-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 10px;
  border: 3px solid rgba(58, 123, 213, 0.5);
}

.doctor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doctor-name {
  font-weight: 600;
  margin-bottom: 5px;
}

.doctor-specialty {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 10px;
}

.doctor-status {
  font-size: 0.9rem;
  font-weight: 500;
}

.doctor-card.available .doctor-status {
  color: #4caf50;
}

.doctor-card:not(.available) .doctor-status {
  color: #f44336;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(16, 42, 66, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(#00d2ff, #3a7bd5);
  border-radius: 3px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .panel {
    min-height: 300px;
  }
}
</style>